<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地址信息</title>
    <link rel="stylesheet" href="Layuimini/lib/layui-v2.6.3/css/layui.css" th:href="@{Layuimini/lib/layui-v2.6.3/css/layui.css}" media="all">
    <link rel="stylesheet" href="Layuimini/lib/font-awesome-4.7.0/css/font-awesome.min.css" th:href="@{Layuimini/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
    <link rel="stylesheet" href="Layuimini/css/public.css" th:href="@{Layuimini/css/public.css}" media="all">
    <link rel="stylesheet" href="Layuimini/js/lay-module/step-lay/step.css" media="all">
</head>

<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-row">
            <div class="layui-col-md9">
                <fieldset class="layui-elem-field layui-field-title" align="center">
                    <legend>地址选择</legend>
                </fieldset>
                <div class="layuimini-main">
                    <form class="layui-form" action="" style="padding:20px;">
                        <div class="layui-form-item" id="area-picker">
                            <div class="layui-form-label">地址选择</div>
                            <div class="layui-input-inline" style="width: 200px;">
                                <select name="province" class="province-selector" data-value="" lay-filter="province-1">
                                    <option value="">请选择省</option>
                                </select>
                            </div>
                            <div class="layui-input-inline" style="width: 200px;">
                                <select name="city" class="city-selector" data-value="" lay-filter="city-1">
                                    <option value="">请选择市</option>
                                </select>
                            </div>
                            <div class="layui-input-inline" style="width: 200px;">
                                <select name="county" class="county-selector" data-value="" lay-filter="county-1">
                                    <option value="">请选择区</option>
                                </select>
                            </div>

                        </div>
                        <div class="layui-form-item layui-form-text" style="width: 730px">
                            <label class="layui-form-label">详细地址</label>
                            <div class="layui-input-block">
                                <textarea placeholder="请输入内容" class="layui-textarea" name="address"></textarea>
                            </div>
                        </div>

                        <div class="layui-input-block">
                            <button class="layui-btn layui-btn-primary layui-border-green" lay-submit lay-filter="saveBtn">提交</button>

                            <button class="layui-btn layui-btn-primary layui-border-orange" type="reset"  >重置</button>

                        </div>
                    </form>

                </div>
            </div>
            <div class="layui-col-md3">
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>计时器功能</legend>
                </fieldset>
                <br> <br>
                <div class="panel-body">
                    <h1 id="runner"></h1><br>
                    <br>
                    <div class="layui-btn-group">
                        <button type="button" class="layui-btn " id="startBtn"> <i id="startCss" class="fa fa-play">&ensp;开始</i></button>

                        <!--<button type="button" class="layui-btn" id="stopBtn"> <i id="stopCss" class="fa fa-pause"></i>&ensp;暂停</button>-->

                        <button type="button" class="layui-btn" id="resetBtn"> <i class="fa fa-refresh"></i>&ensp;重新</button>
                    </div>
                </div>
            </div>
        </div>

    </div>

    </div>

<script  src="jQuery/jquery-2.1.1.min.js" th:src="@{LightYear/js/jquery.min.js}" charset="utf-8"></script>
<script  src="Layuimini/lib/layui-v2.6.3/layui.js" th:src="@{Layuimini/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
<script src="Layuimini/js/lay-config.js?v=1.0.4" charset="utf-8"></script>


<script src="timeStarts/jquery.runner-min.js"></script>
<script src="timeStarts/app.js"></script>

<script>

    layui.use(['layer', 'form', 'layarea'], function () {
        var layer = layui.layer
            , form = layui.form
            , layarea = layui.layarea;

        layarea.render({
            elem: '#area-picker',
            // data: {
            //     province: '广东省',
            //     city: '深圳市',
            //     county: '龙岗区',
            // },
            change: function (res) {
                //选择结果
             //   console.log(res);

                //监听提交
                form.on('submit(saveBtn)', function (data) {

                    var   result =  data.field
                    var    province  =  result.province
                    var   county = result.county
                    var   city =result.city
                    var  address =result.address

                    if(address==""){
                        layer.msg("详细地址不能为空！");
                        return false;
                    }
                    if(province==city){
                        layer.msg("地址为："+province+county+address+".");
                        return false;
                    }

                    layer.msg("地址为："+province+city+county+address+".");
                    return false;
                });

            }
        });
    });

    var flag = true;
    $('#startBtn').click(function() {
        if (flag) {

            $('#runner').runner('start');
            //$("#startBtn").html("开始")
            $("#startCss").removeClass("fa fa-pause").addClass("fa fa-play").html("&ensp;开始");
            layer.msg("计时开始!")
            flag = false;
        } else {

            $('#runner').runner('stop');
           // $("#startBtn").html("暂停")
            $("#startCss").removeClass("fa fa-play").addClass("fa fa-pause").html("&ensp;暂停");
            layer.msg("计时暂停!")
            flag = true;
        }
    });




   /* $('#startBtn').click(function() {
        $('#runner').runner('start');
        $(this).addClass('activeBtn');
        $('#stopBtn').removeClass('activeBtn');
        layer.msg("计时开始!")

    });*/

   /* $('#stopBtn').click(function() {
        $('#runner').runner('stop');
        $(this).addClass('activeBtn');
        $('#startBtn').removeClass('activeBtn');
        layer.msg("计时暂停!")
    });*/

    $('#resetBtn').click(function() {
        $('#runner').runner('reset');
       // $('#stopBtn').removeClass('activeBtn');
       // $('#startBtn').removeClass('activeBtn');
        layer.msg("重新开始!")
    });

</script>

</body>
</html>